<template>
  <div class="news">

    <div id="span">
      <p>我的消息</p>
     <van-icon name="delete-o" />
    </div>
    <van-tabs v-model="active">
      <van-tab title="私信">
        <div id="val" v-for="a in 4" :key="a">
            <p></p>
            <p>河南汇星整容医院</p>
            <p>你好,之前鼻子做过吗
            </p>
        </div>
      </van-tab>
      <van-tab title="评论">
        <div id="max">暂无消息</div>
      </van-tab>
      <van-tab title="赞"><div id="max1">暂无消息</div></van-tab>
      <van-tab title="粉丝"><div id="max2">暂无消息</div></van-tab>
      <van-tab title="通知">
        <div id="max3" v-for="i in 2" :key="i">
           <a href="">2022年7月27日</a>
           <div id="max4">
           <p>任务完成提醒</p>
           <p>您已完成.....</p>
           <p></p>
           <p>去用颜值币兑换好礼</p>
           </div>
        </div></van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 4,
    };
  },
};
</script>

<style>
#span{
  height: 100px;
  width: 100%;
  position: relative;
}
#span :nth-child(1){
  position: absolute;
  top: 30px;
  right: 300px;
  font-size: 35px;
}
#span :nth-child(2){
  position: absolute;
  top: 37px;
  right: 30px;
  font-size: 35px;
}
#val{
  height: 150px;
  width: 100%;
  margin-top: 10px;
  position: relative;
  /* background-color: #ced5e1;  */
border-bottom: 1px solid #9A9A9D;
}
#val :nth-child(1){
  height:120px;
  width: 123px;
  background-color:#BEBEBE;
  text-align: center;
  line-height: 60px;
  font-size: 40px;
  color: white;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 10px;
}
#val :nth-child(2){
  font-size: 30px;
  position: absolute;
  top: 17px;
  left: 150px;
}
#val :nth-child(3){
  font-size: 30px;
  position: absolute;
  top: 80px;
  left: 150px;
  color: #9A9A9D;
}
/* 评论 */
#max1{
  height: 200px;
  width: 200px;
  font-size: 30px;  
  margin-top: 400px;
  margin-left: 300px;
}
#max{
  height: 200px;
  width: 200px;
  font-size: 30px;  
  margin-top: 400px;
  margin-left: 300px;
}
#max2{
  height: 200px;
  width: 200px;
  font-size: 30px;  
  margin-top: 400px;
  margin-left: 300px;
}
#max3{
   height: 330px;
   width: 600px;
   /* background-color: #BEBEBE; */
   margin-left: 80px;
   position: relative;
   margin-top: 30px;
}
#max3 a{
  display: block;
  position: absolute;
  top: 10px;
  right: 190px;
  font-size: 30px;
  color: #CECECE;
  /* background-color: #BEBEBE; */
}
#max4{
  position: absolute;
  top: 73px;
  height:250px;
  width: 100%;
  background-color:#CECECE;
  border-radius: 30px;
}
#max4 :nth-child(1){
   position: absolute;
  top: 10px;
  left: 20px;
  height:250px;
  font-size: 30px;
}
#max4 :nth-child(2){
  position: absolute;
  top: 62px;
  left: 20px;
  height:250px;
  font-size: 30px;
  color: #6C6C6C;
}
#max4 :nth-child(3){
  height: 2px;
  width: 500px;
   position: absolute;
  top: 150px;
  left: 20px;
  background-color:  #6C6C6C;
}
#max4 :nth-child(4){
   position: absolute;
  top: 170px;
  left: 20px;
  height:250px;
  font-size: 30px;
  color: #4F4F84;
}
</style>